<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建采购订单</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
    <script>
        tailwind.config = {
                    theme: {
                        extend: {
                            colors: {
                                primary: '#165DFF',
                                secondary: '#6B7280',
                                success: '#36D399',
                                warning: '#FBBD23',
                                danger: '#F87272',
                                info: '#3ABFF8',
                                light: '#F3F4F6',
                                dark: '#1F2937',
                                'gray-100': '#F9FAFB',
                                'gray-200': '#E5E7EB',
                                'gray-300': '#D1D5DB',
                                'gray-400': '#9CA3AF',
                                'gray-500': '#6B7280',
                                'gray-600': '#4B5563',
                                'gray-700': '#374151',
                                'gray-800': '#1F2937',
                                'gray-900': '#111827',
                            },
                            fontFamily: {
                                inter: ['Inter', 'sans-serif'],
                            },
                        }
                    }
                }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .form-required {
                @apply text-danger;
            }
            .form-group {
                @apply mb-6;
            }
            .form-section {
                @apply mb-8 pb-6 border-b border-gray-200 last:border-0 last:mb-0 last:pb-0;
            }
            .btn {
                @apply px-4 py-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
            }
            .btn-secondary {
                @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400/50;
            }
            .btn-danger {
                @apply bg-white text-danger border border-danger hover:bg-danger/5 focus:ring-danger/50;
            }
            .card {
                @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
            }
            .card-header {
                @apply px-4 py-3 border-b border-gray-200 bg-gray-50;
            }
            .card-body {
                @apply p-4;
            }
            .section-title {
                @apply text-lg font-semibold text-gray-800 mb-4 flex items-center;
            }
            .section-icon {
                @apply mr-2 text-primary;
            }
            .error-message {
                @apply text-danger text-xs mt-1 hidden;
            }
            .error-message.show {
                @apply block;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧表单区域 -->
        <div class="w-full lg:w-2/3">
            <div class="card">
                <div class="card-body">
                    <!-- 订单基本信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-file-alt section-icon"> </i>
                            订单基本信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 系统自动生成字段 -->
                            <div class="form-group">
                                <label for="orderInternalId" class="form-label">采购订单号内码(主键)</label>
                                <input
                                        type="text"
                                        id="orderInternalId"
                                        name="orderInternalId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-INT-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderNo" class="form-label"> 订单编号 </label>
                                <input
                                        type="text"
                                        id="orderNo"
                                        name="orderNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-20231115-0001"
                                        readonly
                                />
                                <div class="error-message" data-for="orderNo">
                                    订单编号格式不正确
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="orderVerificationId" class="form-label">采购订单号核销内码</label>
                                <input
                                        type="text"
                                        id="orderVerificationId"
                                        name="orderVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-VER-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderVerificationNo" class="form-label">采购订单核销号</label>
                                <input
                                        type="text"
                                        id="orderVerificationNo"
                                        name="orderVerificationNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-VNO-20231115-0001"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="finalBusinessNo" class="form-label">末级业务单据号</label>
                                <input
                                        type="text"
                                        id="finalBusinessNo"
                                        name="finalBusinessNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="PO-FBN-20231115-0001"
                                        readonly
                                />
                            </div>
                            <!-- 需要手动填写的字段 -->
                            <div class="form-group">
                                <label for="signingDate" class="form-label">
                                    签约日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="signingDate"
                                        name="signingDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                        value="2023-11-15"
                                />
                            </div>
                            <div class="form-group">
                                <label for="orderValidDate" class="form-label">
                                    订单有效日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="orderValidDate"
                                        name="orderValidDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                        value="2023-12-15"
                                />
                            </div>
                            <div class="form-group">
                                <label for="signingLocation" class="form-label">
                                    签约地点
                                </label>
                                <input
                                        type="text"
                                        id="signingLocation"
                                        name="signingLocation"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入签约地点"
                                        value="深圳市南山区科技园"
                                />
                            </div>
                            <div class="form-group">
                                <label for="deliveryPlanMethod" class="form-label">
                                    交期计划方式
                                </label>
                                <select
                                        id="deliveryPlanMethod"
                                        name="deliveryPlanMethod"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                >
                                    <option value="">请选择交期计划方式</option>
                                    <option value="standard" selected>标准交期</option>
                                    <option value="urgent">紧急交期</option>
                                    <option value="custom">自定义交期</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="deliveryTerms" class="form-label">
                                    交期条款
                                </label>
                                <input
                                        type="text"
                                        id="deliveryTerms"
                                        name="deliveryTerms"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入交期条款"
                                        value="收到预付款后30天内交货"
                                />
                            </div>
                            <div class="form-group">
                                <label for="expectedDeliveryDate" class="form-label">
                                    预计交货日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="expectedDeliveryDate"
                                        name="expectedDeliveryDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                        value="2023-12-15"
                                />
                            </div>
                            <div class="form-group">
                                <label for="pickupDeadline" class="form-label">
                                    提货期限
                                </label>
                                <input
                                        type="text"
                                        id="pickupDeadline"
                                        name="pickupDeadline"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入提货期限"
                                        value="收到通知后7天内提货"
                                />
                            </div>
                            <div class="form-group">
                                <label for="paymentDeadline" class="form-label">
                                    付款期限
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="paymentDeadline"
                                        name="paymentDeadline"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                >
                                    <option value="">请选择付款期限</option>
                                    <option value="cash">现金</option>
                                    <option value="credit30" selected>30天信用期</option>
                                    <option value="credit60">60天信用期</option>
                                    <option value="credit90">90天信用期</option>
                                    <option value="l/c">信用证</option>
                                </select>
                            </div>
                            <!-- 系统自动生成字段 -->
                            <div class="form-group">
                                <label for="creator" class="form-label">创建人</label>
                                <input
                                        type="text"
                                        id="creator"
                                        name="creator"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="采购管理员"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="createTime" class="form-label">创建时间</label>
                                <input
                                        type="text"
                                        id="createTime"
                                        name="createTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="modifier" class="form-label">修改人</label>
                                <input
                                        type="text"
                                        id="modifier"
                                        name="modifier"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="采购管理员"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="modifyTime" class="form-label">修改时间</label>
                                <input
                                        type="text"
                                        id="modifyTime"
                                        name="modifyTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="documentVersion" class="form-label">单据版本号</label>
                                <input
                                        type="text"
                                        id="documentVersion"
                                        name="documentVersion"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="V1.0"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="versionEffectiveTime" class="form-label">本版本生效时间</label>
                                <input
                                        type="text"
                                        id="versionEffectiveTime"
                                        name="versionEffectiveTime"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15 09:30:00"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="originalVersionDate" class="form-label">原始版本生效日期</label>
                                <input
                                        type="text"
                                        id="originalVersionDate"
                                        name="originalVersionDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="2023-11-15"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="documentStatus" class="form-label">单据状态</label>
                                <input
                                        type="text"
                                        id="documentStatus"
                                        name="documentStatus"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="草稿"
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="redFlushFlag" class="form-label">红冲标记</label>
                                <input
                                        type="text"
                                        id="redFlushFlag"
                                        name="redFlushFlag"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value="否"
                                        readonly
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="businessSource" class="form-label">
                                    业务来源
                                </label>
                                <select
                                        id="businessSource"
                                        name="businessSource"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                >
                                    <option value="">请选择业务来源</option>
                                    <option value="internal">内部采购</option>
                                    <option value="external">外部采购</option>
                                    <option value="consignment">寄售采购</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="businessSourceDesc" class="form-label">
                                    业务来源说明
                                </label>
                                <input
                                        type="text"
                                        id="businessSourceDesc"
                                        name="businessSourceDesc"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入业务来源说明"
                                />
                            </div>
                            <div class="form-group">
                                <label for="sourceDocumentNo" class="form-label">
                                    来源单据号
                                </label>
                                <input
                                        type="text"
                                        id="sourceDocumentNo"
                                        name="sourceDocumentNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入来源单据号"
                                />
                            </div>
                            <div class="form-group">
                                <label for="businessDocumentCode" class="form-label">
                                    业务单据编码
                                </label>
                                <input
                                        type="text"
                                        id="businessDocumentCode"
                                        name="businessDocumentCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入业务单据编码"
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="externalOrderVerificationId" class="form-label">外部采购订单核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationId"
                                        name="externalOrderVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationCode" class="form-label">外部采购订单核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationCode"
                                        name="externalOrderVerificationCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemType" class="form-label">外部系统类型</label>
                                <input
                                        type="text"
                                        id="externalSystemType"
                                        name="externalSystemType"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemDocumentId" class="form-label">外部系统单据内码</label>
                                <input
                                        type="text"
                                        id="externalSystemDocumentId"
                                        name="externalSystemDocumentId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalSystemDocumentNo" class="form-label">外部系统单号</label>
                                <input
                                        type="text"
                                        id="externalSystemDocumentNo"
                                        name="externalSystemDocumentNo"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="externalOrderDetailVerificationId" class="form-label">外部采购订单明细核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderDetailVerificationId"
                                        name="externalOrderDetailVerificationId"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderDetailVerificationCode" class="form-label">外部采购订单明细核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderDetailVerificationCode"
                                        name="externalOrderDetailVerificationCode"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationId2" class="form-label">外部采购订单核销内码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationId2"
                                        name="externalOrderVerificationId2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                            <div class="form-group">
                                <label for="externalOrderVerificationCode2" class="form-label">外部采购订单核销外码</label>
                                <input
                                        type="text"
                                        id="externalOrderVerificationCode2"
                                        name="externalOrderVerificationCode2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus bg-gray-50 cursor-not-allowed"
                                        value=""
                                        readonly
                                />
                            </div>
                        </div>
                    </div>
                    <!-- 供应商信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-building section-icon"> </i>
                            供应商信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="form-group">
                                <label for="supplier" class="form-label">
                                    供应商
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="supplier"
                                        name="supplier"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                >
                                    <option value>请选择供应商</option>
                                    <option value="supplier1" selected>深圳市科技发展有限公司</option>
                                    <option value="supplier2">上海电子元件集团</option>
                                    <option value="supplier3">
                                        北京精密仪器股份有限公司
                                    </option>
                                    <option value="supplier4">广州工业材料有限公司</option>
                                </select>
                                <div class="error-message" data-for="supplier">
                                    请选择供应商
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contactPerson" class="form-label">
                                    联系人
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="text"
                                        id="contactPerson"
                                        name="contactPerson"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入联系人"
                                        required
                                        value="张伟"
                                />
                                <div class="error-message" data-for="contactPerson">
                                    请输入联系人
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contactPhone" class="form-label">
                                    联系电话
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="tel"
                                        id="contactPhone"
                                        name="contactPhone"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入联系电话"
                                        required
                                        value="13800138000"
                                />
                                <div class="error-message" data-for="contactPhone">
                                    请输入正确的联系电话
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="form-label"> 电子邮箱 </label>
                                <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入电子邮箱"
                                        value="zhangwei@sztech.com"
                                />
                                <div class="error-message" data-for="email">
                                    请输入正确的电子邮箱
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="supplierAddress" class="form-label">
                                    联系地址
                                </label>
                                <textarea
                                        id="supplierAddress"
                                        name="supplierAddress"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none"
                                        placeholder="请输入供应商联系地址"
                                >深圳市南山区科技园南路1001号</textarea>
                                <div class="error-message" data-for="supplierAddress">
                                    地址过长
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 产品明细 -->
                    <div class="form-section">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="section-title mb-0">
                                <i class="fas fa-boxes section-icon"> </i>
                                产品明细
                            </h2>
                            <button id="addProductBtn" class="btn btn-primary text-sm">
                                <i class="fas fa-plus mr-1"> </i>
                                添加产品
                            </button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                <tr>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12"
                                    >
                                        序号
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        产品名称
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        规格型号
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        单位
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        单价(元)
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        数量
                                        <span class="form-required"> * </span>
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        小计(元)
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        是否暂定价
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        不含税单价
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        不含税金额
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        增值税税率
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                    >
                                        增值税金额
                                    </th>
                                    <th
                                            scope="col"
                                            class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12"
                                    >
                                        操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody
                                        id="productTableBody"
                                        class="bg-white divide-y divide-gray-200"
                                >
                                <tr
                                        class="text-center text-gray-500 py-8"
                                        id="emptyProductRow"
                                >
                                    <td colspan="13" class="px-4 py-8 text-sm">
                                        <div class="flex flex-col items-center">
                                            <i
                                                    class="fas fa-box-open text-2xl mb-2 text-gray-300"
                                            >
                                            </i>
                                            <span> 尚未添加产品，请点击"添加产品"按钮 </span>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 交付信息 -->
                    <div class="form-section">
                        <h2 class="section-title">
                            <i class="fas fa-truck section-icon"> </i>
                            交付信息
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="form-group">
                                <label for="deliveryDate" class="form-label">
                                    期望交付日期
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="date"
                                        id="deliveryDate"
                                        name="deliveryDate"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                        value="2023-12-10"
                                />
                                <div class="error-message" data-for="deliveryDate">
                                    请选择期望交付日期
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="deliveryType" class="form-label">
                                    交付方式
                                    <span class="form-required"> * </span>
                                </label>
                                <select
                                        id="deliveryType"
                                        name="deliveryType"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        required
                                >
                                    <option value>请选择交付方式</option>
                                    <option value="express">快递</option>
                                    <option value="logistics" selected>物流</option>
                                    <option value="self-pickup">自提</option>
                                    <option value="other">其他</option>
                                </select>
                                <div class="error-message" data-for="deliveryType">
                                    请选择交付方式
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="deliveryAddress" class="form-label">
                                    交付地址
                                    <span class="form-required"> * </span>
                                </label>
                                <textarea
                                        id="deliveryAddress"
                                        name="deliveryAddress"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none"
                                        placeholder="请输入交付地址"
                                        required
                                >深圳市南山区科技园物流中心</textarea>
                                <div class="error-message" data-for="deliveryAddress">
                                    请输入交付地址
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiver" class="form-label">
                                    收货人
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="text"
                                        id="receiver"
                                        name="receiver"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入收货人"
                                        required
                                        value="李明"
                                />
                                <div class="error-message" data-for="receiver">
                                    请输入收货人
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="receiverPhone" class="form-label">
                                    收货人电话
                                    <span class="form-required"> * </span>
                                </label>
                                <input
                                        type="tel"
                                        id="receiverPhone"
                                        name="receiverPhone"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入收货人电话"
                                        required
                                        value="13900139000"
                                />
                                <div class="error-message" data-for="receiverPhone">
                                    请输入正确的收货人电话
                                </div>
                            </div>
                            <div class="form-group md:col-span-2">
                                <label for="deliveryRemark" class="form-label">
                                    交付备注
                                </label>
                                <textarea
                                        id="deliveryRemark"
                                        name="deliveryRemark"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md form-input-focus resize-none"
                                        placeholder="请输入交付备注信息"
                                >请轻拿轻放，避免剧烈震动</textarea>
                                <div class="error-message" data-for="deliveryRemark">
                                    备注信息过长
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧实时计算面板 -->
        <div class="w-full lg:w-1/3">
            <div class="card sticky top-24">
                <div class="card-header">
                    <h2 class="font-medium text-gray-800 flex items-center">
                        <i class="fas fa-calculator mr-2 text-primary"> </i>
                        订单汇总
                    </h2>
                </div>
                <div class="card-body">
                    <div class="space-y-4">
                        <div class="text-sm text-gray-500 mb-3">
                            已选产品 (
                            <span id="productCount"> 0 </span>
                            )
                        </div>
                        <div
                                id="summaryProductList"
                                class="max-h-64 overflow-y-auto mb-4"
                        >
                            <div
                                    class="text-center text-gray-500 py-8 text-sm"
                                    id="emptySummaryList"
                            >
                                <div class="flex flex-col items-center">
                                    <i
                                            class="fas fa-shopping-cart text-2xl mb-2 text-gray-300"
                                    >
                                    </i>
                                    <span> 暂无产品，请添加产品 </span>
                                </div>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 pt-4 mt-4">
                            <div class="flex justify-between text-base font-medium mb-2">
                                <span> 订单总金额： </span>
                                <span id="totalAmount" class="text-lg text-primary">
                      ¥0.00
                    </span>
                            </div>
                            <div class="text-xs text-gray-500">
                                <p>根据所选择的产品自动计算，包含所有产品小计金额</p>
                            </div>
                        </div>
                        <div
                                class="bg-blue-50 border border-blue-100 rounded-md p-3 text-sm text-blue-700 mt-4"
                        >
                            <i class="fas fa-info-circle mr-1"> </i>
                            <span> 提交订单后将自动生成采购合同，进入审批流程 </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- 底部操作栏 -->
<footer class="bg-white border-t border-gray-200 py-4 sticky bottom-0 z-10">
    <div
            class="container mx-auto px-4 flex justify-end items-center space-x-3"
    >
        <button id="cancelBtn" class="btn btn-danger">返回</button>
        <button id="submitBtn" class="btn btn-primary">提交订单</button>
    </div>
</footer>
<!-- 添加产品模态框 -->
<div
        id="addProductModal"
        class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"
>
    <div
            class="bg-white rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] flex flex-col"
    >
        <div
                class="flex justify-between items-center px-6 py-4 border-b border-gray-200"
        >
            <h3 class="text-lg font-semibold text-gray-900">选择产品</h3>
            <button
                    id="closeProductModal"
                    class="text-gray-500 hover:text-gray-700"
            >
                <i class="fas fa-times"> </i>
            </button>
        </div>
        <div class="p-4 border-b border-gray-200">
            <div class="relative">
                <input
                        type="text"
                        id="productSearchInput"
                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md form-input-focus"
                        placeholder="搜索产品名称、规格或型号..."
                />
                <i
                        class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                >
                </i>
            </div>
        </div>
        <div class="flex-grow overflow-y-auto p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="productList">
                <!-- 产品列表将通过JS动态生成 -->
            </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between items-center">
            <div class="text-sm text-gray-500">
                已选择 <span id="selectedCount">0</span> 个产品
            </div>
            <div class="space-x-3">
                <button id="cancelProductSelect" class="btn btn-secondary">
                    取消
                </button>
                <button id="confirmProductSelect" class="btn btn-primary">
                    确认选择 (<span id="confirmCount">0</span>)
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载时初始化
            document.addEventListener('DOMContentLoaded', () => {
                // 初始化产品数据
                initProductData();

                // 绑定事件监听
                bindEventListeners();
                
                // 添加默认产品
                addDefaultProducts();
            });

            // 产品数据
            let products = [];
            let selectedProducts = [];
            let selectedProductIds = new Set();

            // 初始化产品数据
            function initProductData() {
                // 模拟产品数据
                products = [
                    {
                        id: 'p1',
                        name: '高性能CPU',
                        specification: 'Intel Core i7-12700K',
                        unit: '个',
                        price: 2599.00,
                        stock: 50
                    },
                    {
                        id: 'p2',
                        name: '专业显卡',
                        specification: 'NVIDIA RTX 3080',
                        unit: '个',
                        price: 5299.00,
                        stock: 30
                    },
                    {
                        id: 'p3',
                        name: '主板',
                        specification: 'ASUS ROG STRIX Z690',
                        unit: '个',
                        price: 1999.00,
                        stock: 45
                    },
                    {
                        id: 'p4',
                        name: '内存条',
                        specification: 'Kingston 16GB DDR5 5200',
                        unit: '条',
                        price: 459.00,
                        stock: 100
                    },
                    {
                        id: 'p5',
                        name: '固态硬盘',
                        specification: 'Samsung 1TB NVMe SSD',
                        unit: '个',
                        price: 899.00,
                        stock: 80
                    },
                    {
                        id: 'p6',
                        name: '电源',
                        specification: 'Corsair 850W 80+ Gold',
                        unit: '个',
                        price: 799.00,
                        stock: 60
                    },
                    {
                        id: 'p7',
                        name: '机箱',
                        specification: 'NZXT H5 Flow',
                        unit: '个',
                        price: 499.00,
                        stock: 35
                    },
                    {
                        id: 'p8',
                        name: '散热器',
                        specification: 'Noctua NH-D15',
                        unit: '个',
                        price: 699.00,
                        stock: 25
                    },
                    // 添加更多模拟产品
                    {
                        id: 'p9',
                        name: '显示器',
                        specification: 'Dell UltraSharp 27寸 4K',
                        unit: '台',
                        price: 3299.00,
                        stock: 20
                    },
                    {
                        id: 'p10',
                        name: '机械键盘',
                        specification: 'Cherry MX Board 10.0',
                        unit: '个',
                        price: 899.00,
                        stock: 40
                    },
                    {
                        id: 'p11',
                        name: '无线鼠标',
                        specification: 'Logitech MX Master 3',
                        unit: '个',
                        price: 699.00,
                        stock: 60
                    },
                    {
                        id: 'p12',
                        name: '移动硬盘',
                        specification: 'WD My Passport 2TB',
                        unit: '个',
                        price: 499.00,
                        stock: 70
                    },
                    {
                        id: 'p13',
                        name: '路由器',
                        specification: '华硕 AX6000 WiFi 6',
                        unit: '台',
                        price: 1299.00,
                        stock: 30
                    },
                    {
                        id: 'p14',
                        name: '打印机',
                        specification: 'HP LaserJet Pro MFP',
                        unit: '台',
                        price: 1599.00,
                        stock: 25
                    },
                    {
                        id: 'p15',
                        name: '摄像头',
                        specification: 'Logitech C920 HD Pro',
                        unit: '个',
                        price: 399.00,
                        stock: 50
                    },
                    {
                        id: 'p16',
                        name: '音响',
                        specification: 'Bose Companion 50',
                        unit: '套',
                        price: 1299.00,
                        stock: 20
                    }
                ];

                // 渲染产品列表到模态框
                renderProductList(products);
            }

            // 切换产品选择状态
            function toggleProductSelection(productId) {
                if (selectedProductIds.has(productId)) {
                    selectedProductIds.delete(productId);
                    selectedProducts = selectedProducts.filter(p => p.id !== productId);
                } else {
                    selectedProductIds.add(productId);
                    const product = products.find(p => p.id === productId);
                    if (product) {
                        selectedProducts.push({
                            ...product,
                            quantity: 1,
                            subtotal: product.price
                        });
                    }
                }

                renderProductList(products);
                updateProductSelectionCount();
            }

            // 更新产品选择计数
            function updateProductSelectionCount() {
                const selectedCount = document.getElementById('selectedCount');
                const confirmCount = document.getElementById('confirmCount');
                const count = selectedProductIds.size;
                selectedCount.textContent = count;
                confirmCount.textContent = count;
            }

            // 渲染产品列表到模态框
            function renderProductList(productList) {
                const productListContainer = document.getElementById('productList');
                productListContainer.innerHTML = '';

                if (productList.length === 0) {
                    productListContainer.innerHTML = `
    <div class="col-span-3 text-center py-8 text-gray-500">
      <i class="fas fa-search text-2xl mb-2 text-gray-300">
      </i>
      <p>未找到匹配的产品</p>
      </div>
    `;
                    return;
                }

                productList.forEach(product => {
                    const isSelected = selectedProductIds.has(product.id);

                    const productCard = document.createElement('div');
                    productCard.className = `border rounded-md p-3 cursor-pointer transition-all ${isSelected ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-primary hover:bg-gray-50'}`;
                    productCard.dataset.productId = product.id;

                    productCard.innerHTML = `
    <div class="flex items-start">
      <div class="flex-shrink-0 mr-3">
        <div class="w-12 h-12 bg-gray-100 rounded flex items-center justify-center">
          <i class="fas fa-microchip text-gray-500">
          </i>
        </div>
      </div>
      <div class="flex-grow">
        <div class="flex justify-between items-start mb-1">
          <h4 class="font-medium text-gray-900">${product.name}</h4>
            <div class="w-5 h-5 rounded-full border ${isSelected ? 'border-primary bg-primary text-white flex items-center justify-center' : 'border-gray-300'}">
              ${isSelected ? '<i class="fas fa-check text-xs"></i>' : ''}
          </div>
        </div>
        <p class="text-sm text-gray-500 mb-2">${product.specification}</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-primary">¥${product.price.toFixed(2)}</span>
              <span class="text-xs text-gray-500">库存: ${product.stock} ${product.unit}</span>
              </div>
            </div>
          </div>
        `;

                    productCard.addEventListener('click', () => {
                        toggleProductSelection(product.id);
                    });

                    productListContainer.appendChild(productCard);
                });
            }

            // 渲染产品表格
            function renderProductTable() {
                const tableBody = document.getElementById('productTableBody');
                const emptyRow = document.getElementById('emptyProductRow');

                if (selectedProducts.length === 0) {
                    emptyRow.classList.remove('hidden');
                    return;
                }

                emptyRow.classList.add('hidden');
                tableBody.innerHTML = '';

                selectedProducts.forEach((product, index) => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-colors';
                    row.dataset.productId = product.id;

                    // 计算不含税金额和增值税相关字段
                    const taxRate = 0.13; // 假设增值税税率为13%
                    const amountExcludingTax = product.price / (1 + taxRate);
                    const taxAmount = product.subtotal - (product.subtotal / (1 + taxRate));

                    row.innerHTML = `
    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${index + 1}</td>
      <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${product.name}</td>
        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.specification}</td>
          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.unit}</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.price.toFixed(2)}</td>
              <td class="px-4 py-3 whitespace-nowrap">
                <input type="number" min="1" value="${product.quantity}" class="product-quantity w-16 px-2 py-1 border border-gray-300 rounded-md text-sm form-input-focus" data-product-id="${product.id}">
                </td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 product-subtotal">${product.subtotal.toFixed(2)}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                    <select class="interim-pricing w-20 px-1 py-1 border border-gray-300 rounded-md text-sm form-input-focus" data-product-id="${product.id}">
                      <option value="是">是</option>
                      <option value="否" selected>否</option>
                    </select>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${amountExcludingTax.toFixed(2)}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${(product.subtotal / (1 + taxRate)).toFixed(2)}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${(taxRate * 100).toFixed(0)}%</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${taxAmount.toFixed(2)}</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-danger hover:text-danger/80 delete-product" data-product-id="${product.id}">
                      <i class="fas fa-trash-alt">
                      </i>
                    </button>
                  </td>
                `;

                    tableBody.appendChild(row);
                });

                // 绑定数量输入框事件
                document.querySelectorAll('.product-quantity').forEach(input => {
                    input.addEventListener('change', handleQuantityChange);
                    input.addEventListener('input', validateQuantityInput);
                });

                // 绑定删除按钮事件
                document.querySelectorAll('.delete-product').forEach(button => {
                    button.addEventListener('click', handleDeleteProduct);
                });

                // 绑定是否暂定价选择框事件
                document.querySelectorAll('.interim-pricing').forEach(select => {
                    select.addEventListener('change', handleInterimPricingChange);
                });

                // 更新汇总信息
                updateSummary();
            }

            // 处理数量变化
            function handleQuantityChange(e) {
                const productId = e.target.dataset.productId;
                const quantity = parseInt(e.target.value) || 1;

                // 更新产品数量和小计
                const productIndex = selectedProducts.findIndex(p => p.id === productId);
                if (productIndex !== -1) {
                    selectedProducts[productIndex].quantity = quantity;
                    selectedProducts[productIndex].subtotal = selectedProducts[productIndex].price * quantity;

                    // 更新表格中的小计
                    e.target.closest('tr').querySelector('.product-subtotal').textContent = selectedProducts[productIndex].subtotal.toFixed(2);

                    // 更新不含税金额和增值税金额
                    const taxRate = 0.13;
                    const amountExcludingTax = selectedProducts[productIndex].price / (1 + taxRate);
                    const taxAmount = selectedProducts[productIndex].subtotal - (selectedProducts[productIndex].subtotal / (1 + taxRate));

                    const row = e.target.closest('tr');
                    row.querySelector('td:nth-child(9)').textContent = amountExcludingTax.toFixed(2);
                    row.querySelector('td:nth-child(10)').textContent = (selectedProducts[productIndex].subtotal / (1 + taxRate)).toFixed(2);
                    row.querySelector('td:nth-child(12)').textContent = taxAmount.toFixed(2);

                    // 更新汇总信息
                    updateSummary();
                }
            }

            // 处理是否暂定价变化
            function handleInterimPricingChange(e) {
                // 这里可以添加处理逻辑，比如标记产品为暂定价等
                console.log('暂定价状态变更:', e.target.value);
            }

            // 处理删除产品
            function handleDeleteProduct(e) {
                const productId = e.target.closest('button').dataset.productId;

                // 从选中产品中移除
                selectedProductIds.delete(productId);
                selectedProducts = selectedProducts.filter(p => p.id !== productId);

                // 重新渲染表格和汇总
                renderProductTable();
                renderProductList(products);
            }

            // 更新汇总信息
            function updateSummary() {
                const summaryList = document.getElementById('summaryProductList');
                const emptySummary = document.getElementById('emptySummaryList');
                const productCount = document.getElementById('productCount');
                const totalAmount = document.getElementById('totalAmount');

                if (selectedProducts.length === 0) {
                    emptySummary.classList.remove('hidden');
                    productCount.textContent = '0';
                    totalAmount.textContent = '¥0.00';
                    return;
                }

                emptySummary.classList.add('hidden');
                productCount.textContent = selectedProducts.length;

                // 计算总金额
                const total = selectedProducts.reduce((sum, product) => sum + product.subtotal, 0);
                totalAmount.textContent = `¥${total.toFixed(2)}`;

                // 渲染汇总产品列表
                summaryList.innerHTML = '';

                selectedProducts.forEach(product => {
                    const item = document.createElement('div');
                    item.className = 'flex justify-between items-center py-2 border-b border-gray-100 last:border-0';

                    // 计算不含税金额和增值税相关字段
                    const taxRate = 0.13; // 假设增值税税率为13%
                    const amountExcludingTax = product.price / (1 + taxRate);
                    const taxAmount = product.subtotal - (product.subtotal / (1 + taxRate));

                    item.innerHTML = `
    <div class="text-sm">
      <div class="font-medium text-gray-900">${product.name}</div>
        <div class="text-xs text-gray-500">${product.quantity} ${product.unit} × ¥${product.price.toFixed(2)}</div>
        <div class="text-xs text-gray-500">不含税单价: ¥${amountExcludingTax.toFixed(2)}</div>
        <div class="text-xs text-gray-500">增值税: ¥${taxAmount.toFixed(2)} (${(taxRate * 100).toFixed(0)}%)</div>
        </div>
        <div class="text-sm font-medium text-gray-900">¥${product.subtotal.toFixed(2)}</div>
        `;

                    summaryList.appendChild(item);
                });
            }

            // 绑定事件监听
            function bindEventListeners() {
                // 添加产品按钮
                document.getElementById('addProductBtn').addEventListener('click', () => {
                    document.getElementById('addProductModal').classList.remove('hidden');
                    document.getElementById('productSearchInput').focus();
                    updateProductSelectionCount(); // 初始化选择计数
                });

                // 关闭产品模态框
                document.getElementById('closeProductModal').addEventListener('click', () => {
                    document.getElementById('addProductModal').classList.add('hidden');
                });

                // 取消产品选择
                document.getElementById('cancelProductSelect').addEventListener('click', () => {
                    document.getElementById('addProductModal').classList.add('hidden');
                });

                // 确认产品选择
                document.getElementById('confirmProductSelect').addEventListener('click', () => {
                    document.getElementById('addProductModal').classList.add('hidden');
                    renderProductTable();
                    updateProductSelectionCount();
                });

                // 产品搜索
                document.getElementById('productSearchInput').addEventListener('input', (e) => {
                    const searchTerm = e.target.value.toLowerCase().trim();

                    if (!searchTerm) {
                        renderProductList(products);
                        return;
                    }

                    const filteredProducts = products.filter(product =>
                        product.name.toLowerCase().includes(searchTerm) ||
                        product.specification.toLowerCase().includes(searchTerm)
                    );

                    renderProductList(filteredProducts);
                });



                // 提交订单
                document.getElementById('submitBtn').addEventListener('click', () => {
                    if (validateForm()) {
                        window.location.href = '../purchaseOder/purchaseOrder.html';
                    }
                });

                // 取消订单
                document.getElementById('cancelBtn').addEventListener('click', () => {
                    window.location.href = '../purchaseOder/purchaseOrder.html';
                });

                // 表单验证
                const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
                requiredInputs.forEach(input => {
                    input.addEventListener('blur', () => validateField(input));
                });

                // 电话格式验证
                const phoneInputs = document.querySelectorAll('input[type="tel"]');
                phoneInputs.forEach(input => {
                    input.addEventListener('blur', () => validatePhone(input));
                });

                // 日期验证
                const dateInputs = document.querySelectorAll('input[type="date"]');
                dateInputs.forEach(input => {
                    input.addEventListener('blur', () => validateDate(input));
                });

                // 设置默认日期为今天
                const today = new Date().toISOString().split('T')[0];
                document.getElementById('signingDate').value = today;
                document.getElementById('expectedDeliveryDate').value = today;

                // 设置订单有效日期为30天后
                const validDate = new Date();
                validDate.setDate(validDate.getDate() + 30);
                document.getElementById('orderValidDate').value = validDate.toISOString().split('T')[0];
            }

            // 验证表单
            function validateForm() {
                let isValid = true;

                // 验证必填项
                const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
                requiredInputs.forEach(input => {
                    if (!validateField(input)) {
                        isValid = false;
                    }
                });

                // 验证电话格式
                const phoneInputs = document.querySelectorAll('input[type="tel"]');
                phoneInputs.forEach(input => {
                    if (!validatePhone(input)) {
                        isValid = false;
                    }
                });

                // 验证日期
                const dateInputs = document.querySelectorAll('input[type="date"]');
                dateInputs.forEach(input => {
                    if (!validateDate(input)) {
                        isValid = false;
                    }
                });

                // 验证是否有产品
                if (selectedProducts.length === 0) {
                    alert('请至少添加一个产品');
                    isValid = false;
                }

                return isValid;
            }

            // 验证单个字段
            function validateField(input) {
                const errorElement = document.querySelector(`.error-message[data-for="${input.id}"]`);

                if (!input.value.trim()) {
                    if (errorElement) {
                        errorElement.textContent = '此字段为必填项';
                        errorElement.classList.add('show');
                    }
                    input.classList.add('border-danger');
                    return false;
                }

                if (errorElement) {
                    errorElement.classList.remove('show');
                }
                input.classList.remove('border-danger');
                return true;
            }

            // 验证电话格式
            function validatePhone(input) {
                if (!input.value.trim()) return true; // 非必填项为空时不验证

                const phoneRegex = /^1[3-9]\d{9}$/;
                const errorElement = document.querySelector(`.error-message[data-for="${input.id}"]`);

                if (!phoneRegex.test(input.value.trim())) {
                    if (errorElement) {
                        errorElement.textContent = '请输入正确的手机号码';
                        errorElement.classList.add('show');
                    }
                    input.classList.add('border-danger');
                    return false;
                }

                if (errorElement) {
                    errorElement.classList.remove('show');
                }
                input.classList.remove('border-danger');
                return true;
            }

            // 验证日期
            function validateDate(input) {
                if (!input.value.trim()) return false; // 日期是必填项

                const selectedDate = new Date(input.value);
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                const errorElement = document.querySelector(`.error-message[data-for="${input.id}"]`);

                if (selectedDate < today) {
                    if (errorElement) {
                        errorElement.textContent = '日期不能早于今天';
                        errorElement.classList.add('show');
                    }
                    input.classList.add('border-danger');
                    return false;
                }

                if (errorElement) {
                    errorElement.classList.remove('show');
                }
                input.classList.remove('border-danger');
                return true;
            }
            
            // 添加默认产品
            function addDefaultProducts() {
                // 清空现有产品
                selectedProducts = [];
                selectedProductIds = new Set();
                
                // 添加第一个默认产品
                selectedProductIds.add('p1');
                selectedProducts.push({
                    id: 'p1',
                    name: '高性能CPU',
                    specification: 'Intel Core i7-12700K',
                    unit: '个',
                    price: 2599.00,
                    quantity: 2,
                    subtotal: 5198.00
                });
                
                // 添加第二个默认产品
                selectedProductIds.add('p4');
                selectedProducts.push({
                    id: 'p4',
                    name: '内存条',
                    specification: 'Kingston 16GB DDR5 5200',
                    unit: '条',
                    price: 459.00,
                    quantity: 4,
                    subtotal: 1836.00
                });
                
                // 渲染产品表格
                renderProductTable();
                updateProductSelectionCount();
                updateSummary();
            }
</script>
</body>
</html>
